import React, { Component } from "react";
import Header from "../../components/Header/Header";
import Middle from "../../components/Middle/Middle";
import Footer from "../../components/Footer/Footer";
import Mv from "../../components/Mv/Mv";
export default class Home extends Component {
	//数据,状态
	state = {
		middleArr: [
			{ title: "html", position: "精通", checked: false },
			{ title: "css", position: "熟练", checked: false },
			{ title: "js", position: "了解", checked: false },
			{ title: "jquery", position: "精通", checked: false },
			{ title: "bootstarp", position: "熟练", checked: false },
			{ title: "node.js", position: "精通", checked: false },
			{ title: "express", position: "熟练", checked: false },
			{ title: "react", position: "精通", checked: false },
			{ title: "vue", position: "了解", checked: false },
			{ title: "wechat", position: "熟练", checked: false },
		],
		mvArr: [
			{
				checked: false,
				id: 5334103,
				cover:
					"http://p1.music.126.net/G09rskU97H10HPPowgUIng==/1426066593488734.jpg",
				name: "温暖你的冬 录音花絮2",
				playCount: 61787,
				briefDesc: null,
				desc: null,
				artistName: "欧阳娜娜",
				artistId: 1087140,
				duration: 146470,
				mark: 0,
				subed: false,
				artists: [
					{
						id: 1087140,
						name: "欧阳娜娜",
						alias: ["Nana Ou-yang", "娜比"],
						transNames: null,
					},
				],
			},
			{
				checked: false,
				id: 10928981,
				cover:
					"http://p1.music.126.net/Sacm9rVUjFIagBJ3KLfVHw==/109951164920088043.jpg",
				name: "BilalTallanma",
				playCount: 170126,
				briefDesc: null,
				desc: null,
				artistName: "Bilal Enwer",
				artistId: 1039011,
				duration: 1455000,
				mark: 0,
				subed: false,
				artists: [
					{
						id: 1039011,
						name: "Bilal Enwer",
						alias: [],
						transNames: null,
					},
				],
			},
			{
				checked: false,
				id: 10880673,
				cover:
					"http://p1.music.126.net/jvHGykRirEXz1hzqNEnPCA==/109951164240795974.jpg",
				name: "起风了",
				playCount: 6033623,
				briefDesc: "吴青峰热单《起风了》MV公开！",
				desc: null,
				artistName: "吴青峰",
				artistId: 187229,
				duration: 303000,
				mark: 0,
				subed: false,
				artists: [
					{
						id: 187229,
						name: "吴青峰",
						alias: ["可人儿", "吴啾咪", "Greeny"],
						transNames: null,
					},
				],
			},
			{
				checked: false,
				id: 10929612,
				cover:
					"http://p1.music.126.net/x9oKLgPzfqKbwExhd1RmRA==/109951164922321089.jpg",
				name: "덤더럼 (Dumhdurum) | SBS人气歌谣 20/04/19 现场版",
				playCount: 95710,
				briefDesc: null,
				desc: null,
				artistName: "Apink",
				artistId: 126277,
				duration: 226000,
				mark: 0,
				subed: false,
				artists: [
					{
						id: 126277,
						name: "Apink",
						alias: ["에이핑크", "A pink", "阿粉"],
						transNames: ["에이핑크"],
					},
				],
			},
			{
				checked: false,
				id: 10862189,
				cover:
					"http://p1.music.126.net/rHAgVJmMnIfFTry6W9tJmw==/109951163962637943.jpg",
				name: "上学威龙",
				playCount: 4757901,
				briefDesc: null,
				desc: null,
				artistName: "法老",
				artistId: 865007,
				duration: 214000,
				mark: 0,
				subed: false,
				artists: [
					{
						id: 865007,
						name: "法老",
						alias: [],
						transNames: null,
					},
				],
			},
			{
				checked: false,
				id: 10862160,
				cover:
					"http://p1.music.126.net/H6wSPKjK54lkw0ZJFBIa8Q==/109951163962253077.jpg",
				name: "bad guy",
				playCount: 17694915,
				briefDesc: null,
				desc: null,
				artistName: "Billie Eilish",
				artistId: 11972054,
				duration: 205000,
				mark: 0,
				subed: false,
				artists: [
					{
						id: 11972054,
						name: "Billie Eilish",
						alias: ["碧梨", "Billie Eilish Pirate Baird O'Connell"],
						transNames: ["比莉·艾利什"],
					},
				],
			},
			{
				checked: false,
				id: 10919322,
				cover:
					"http://p1.music.126.net/ZQ-gtRQ9V62nsMV9HKfweg==/109951164771170702.jpg",
				name: "BTS (방탄소년단) 'Black Swan' Official MV",
				playCount: 1945495,
				briefDesc: null,
				desc: null,
				artistName: "BTS (防弹少年团)",
				artistId: 783124,
				duration: 217000,
				mark: 0,
				subed: false,
				artists: [
					{
						id: 783124,
						name: "BTS (防弹少年团)",
						alias: [
							"방탄소년단",
							"BTS",
							"Bangtan Boys",
							"胖蛋",
							"防弹少年团",
							"bts 防弹少年团",
						],
						transNames: null,
					},
				],
			},
			{
				checked: false,
				id: 5617045,
				cover:
					"http://p1.music.126.net/AeqFssNiKB-aKodmx-KhUw==/18793952255574830.jpg",
				name: "Ablikim-Ablimit ( Talwa Qiz )",
				playCount: 466199,
				briefDesc: null,
				desc: null,
				artistName: "Ablikim Ablimit",
				artistId: 12118166,
				duration: 251030,
				mark: 0,
				subed: false,
				artists: [
					{
						id: 12118166,
						name: "Ablikim Ablimit",
						alias: null,
						transNames: null,
					},
				],
			},
			{
				checked: false,
				id: 10929390,
				cover:
					"http://p1.music.126.net/2cXJJRroBgy2wULzQ0SQlg==/109951165923968787.jpg",
				name: "Wheels on the Bus",
				playCount: 178364,
				briefDesc: null,
				desc: null,
				artistName: "斑马儿歌",
				artistId: 35229524,
				duration: 152000,
				mark: 0,
				subed: false,
				artists: [
					{
						id: 35229524,
						name: "斑马儿歌",
						alias: [],
						transNames: null,
					},
				],
			},
			{
				checked: false,
				id: 5696012,
				cover:
					"http://p1.music.126.net/EknvVEOf8QZos6dwMOWO-w==/109951163053400031.jpg",
				name: "Uyghur kizi",
				playCount: 845514,
				briefDesc: null,
				desc: null,
				artistName: "Abdugini Ablikim",
				artistId: 12038158,
				duration: 188290,
				mark: 0,
				subed: false,
				artists: [
					{
						id: 12038158,
						name: "Abdugini Ablikim",
						alias: null,
						transNames: null,
					},
				],
			},
			{
				checked: false,
				id: 10929614,
				cover:
					"http://p1.music.126.net/Rp-IJ6LpijaP1lptAVuCOw==/109951167725323260.jpg",
				name: "Oh my god | MBC音乐中心 20/04/18 现场版",
				playCount: 61365,
				briefDesc: null,
				desc: null,
				artistName: "(G)I-DLE",
				artistId: 14055085,
				duration: 200000,
				mark: 0,
				subed: false,
				artists: [
					{
						id: 14055085,
						name: "(G)I-DLE",
						alias: [
							"(여자)아이들",
							"Cube新女团",
							"女孩子",
							"女孩子们",
							"여자 아이들",
							"女娃",
							"gidle",
						],
						transNames: null,
					},
				],
			},
			{
				checked: false,
				id: 10894787,
				cover:
					"http://p1.music.126.net/GdOK2X9pAIU3YroZkHHA0w==/109951164417513957.jpg",
				name: "Phoenix 涅槃 (英雄联盟2019全球总决赛主题曲)",
				playCount: 5633378,
				briefDesc: null,
				desc: null,
				artistName: "Cailin Russo",
				artistId: 12334074,
				duration: 208000,
				mark: 0,
				subed: false,
				artists: [
					{
						id: 12334074,
						name: "Cailin Russo",
						alias: [],
						transNames: null,
					},
					{
						id: 964410,
						name: "Chrissy Costanza",
						alias: [],
						transNames: null,
					},
					{
						id: 1047337,
						name: "英雄联盟",
						alias: ["英雄联盟", "撸啊撸", "lol", "League of Legends"],
						transNames: null,
					},
				],
			},
			{
				checked: false,
				id: 10929578,
				cover:
					"http://p1.music.126.net/o9Rh84cpIF8BpnGyJTW2gA==/109951165526929399.jpg",
				name: "Verde",
				playCount: 20284,
				briefDesc: null,
				desc: null,
				artistName: "J. Balvin",
				artistId: 309127,
				duration: 250000,
				mark: 0,
				subed: false,
				artists: [
					{
						id: 309127,
						name: "J. Balvin",
						alias: ["J Balvin", "j balvin"],
						transNames: null,
					},
					{
						id: 999423,
						name: "Sky",
						alias: ["soft rock /classical band", "soft rock /classical band"],
						transNames: null,
					},
				],
			},
			{
				checked: false,
				id: 462450,
				cover:
					"http://p1.music.126.net/NZSgYJrX1zgOGTP10oqv1g==/7888995930490851.jpg",
				name: "Counting Sheep (Official Video)",
				playCount: 6972242,
				briefDesc: null,
				desc: null,
				artistName: "SAFIA",
				artistId: 986155,
				duration: 173080,
				mark: 0,
				subed: false,
				artists: [
					{
						id: 986155,
						name: "SAFIA",
						alias: [],
						transNames: null,
					},
				],
			},
			{
				checked: false,
				id: 5336769,
				cover:
					"http://p1.music.126.net/BRNTmHJI0SilrYPm2t_TMA==/3251255892352165.jpg",
				name: "小学生广播体操七彩阳光",
				playCount: 1235198,
				briefDesc: null,
				desc: null,
				artistName: "群星",
				artistId: 122455,
				duration: 281920,
				mark: 0,
				subed: false,
				artists: [
					{
						id: 122455,
						name: "群星",
						alias: ["原声带", "Various Artists", "华语群星"],
						transNames: null,
					},
				],
			},
		],
	};

	updateChecked = (i) => {
		return () => {
			// 获取state数据
			let newmiddlearr = this.state.middleArr;
			// 修改checked
			newmiddlearr[i].checked = !newmiddlearr[i].checked;
			//修改state中的数据
			this.setState({
				middleArr: newmiddlearr,
			});
		};
	};

	wvname = (i) => {
		return () => {
			//获取state数据
			let newname = this.state.mvArr;
			// 修改artistName
			newname[i].checked = !newname[i].checked;
			// 修改state中的数据
			this.setState({
				mvArr: newname,
			});
		};
	};

	render() {
		return (
			<>
				<Header></Header>
				{/* <Middle middlearr={this.state.middleArr} str={this.state.str} checked={this.updateChecked}></Middle> */}
				{/* <Middle {...this.state} checked={this.updateChecked}></Middle>
				<Mv {...this.state} wvnames={ this.wvname} /> */}
				<Middle
					middleArr={this.state.middleArr}
					checked={this.updateChecked}
				></Middle>
				<Mv mvArr={this.state.mvArr} wvnames={this.wvname}></Mv>
				<Footer />
			</>
		);
	}
}
